<template>
  <div class="h-[100%]">
    <div class="flex justify-between flex-wrap items-center h-[32px]">
      <div class="flex items-center">
        <SvgIcon icon-class="daichuli" />
        <span class="ml-[4px] font-bold">任务管理</span>
      </div>
      <div class="flex text-[14px] text-[#4e4e4e] flex-wrap">
        <el-checkbox class="mr-[8px]" v-model="only_self" label="只看自己" :true-label="1" :false-label="0" @change="handleCheck" v-if="only_self_btn" />
        <MButton text="今天" class="mr-[8px]" @click="handleToday" v-if="actvieTime != getTodayDate()" />
        <el-date-picker v-model="times" type="week" format="YYYY 第 ww 周" value-format="YYYY-MM-DD" @change="handleTimeChange" placeholder="选择周" />
        <MButton icon="add" text="新增" class="ml-[8px]" @click="handleAdd" />
      </div>
    </div>
    <div class="relative">
      <div class="left absolute top-1/2 transform -translate-y-1/2 left-[10px] text-[20px] hover:opacity-40" @click="handleLeftRight('pre')">
        <SvgIcon icon-class="arrow_left" />
      </div>
      <div class="flex gap-[8px] justify-around mx-[36px] my-[8px]">
        <div
          v-for="item in timeList"
          :key="item"
          :class="actvieTime === item.date ? 'time_active' : ''"
          @click="handleTime(item.date)"
          class="bg-[var(--base-home-time-color)] w-[100%] h-[100%] text-center text-[14px] py-[4px] rounded-[8px] cursor-pointer hover:bg-[var(--base-home-time-hover)]"
        >
          <div class="mb-[4px]">{{ item.weekChinese }}</div>
          <div>{{ item.day }}</div>
        </div>
      </div>
      <div class="right absolute top-1/2 transform -translate-y-1/2 right-[10px] text-[20px] hover:opacity-40" @click="handleLeftRight('next')">
        <SvgIcon icon-class="arrow_right" />
      </div>
    </div>
    <div class="flex justify-between flex-wrap text-[14px] my-[4px]">
      <div>任务列表</div>
      <div>
        <span class="tag gray">完成</span>
        <span class="tag mx-[16px] yellow">待办</span>
        <span class="tag red">延期</span>
      </div>
    </div>
    <div class="content_main overflow-auto">
      <List :data="list" @details="handleDetails" />
    </div>
  </div>
  <Add v-model="addVisible" :id="addIds" @close="addIds = null" @refresh="getList()" />
  <Details v-model="detailsVisible" :id="detailsIds" @close="detailsIds = null" @refresh="getList()" />
</template>
<script setup>
import MButton from "../MButton.vue"
import SvgIcon from "@/components/SvgIcon/index.vue"
import List from "./list.vue"
import Add from "./add/index.vue"
import Details from "./details/index.vue"
import { getTaskList } from "@/api/system/user.js"
import { authList } from "@/auth/index.js"
import { isPermission } from "@/hooks/index.js"
import { getCurrentWeekDates, getPreviousWeekDates, getNextWeekDates, getTodayDate, getSevenDays, getWeekRange } from "@/utils/time.js"
const only_self_btn = computed(() => isPermission(authList.task.only_self))
const times = ref(getTodayDate())
const actvieTime = ref(getTodayDate())
const timeList = ref(getCurrentWeekDates())
const only_self = ref(1)
const handleLeftRight = (val) => {
  if (val === "pre") {
    timeList.value = getPreviousWeekDates(timeList.value[0].date)
  } else {
    timeList.value = getNextWeekDates(timeList.value[timeList.value.length - 1].date)
  }
  actvieTime.value = timeList.value[0].date
  times.value = timeList.value[0].date
  getList(actvieTime.value)
}
const list = ref([])
const getList = async (create_time) => {
  let time = create_time || actvieTime.value
  const { data } = await getTaskList({
    query_time: time,
    only_self: only_self.value,
  })
  list.value = data || []
}
getList(actvieTime.value)
const handleTime = (val) => {
  actvieTime.value = val
  getList(val)
}
const handleCheck = () => {
  getList(actvieTime.value)
}
const handleToday = () => {
  times.value = getTodayDate()
  actvieTime.value = getTodayDate()
  timeList.value = getCurrentWeekDates()
  getList(actvieTime.value)
}
const addVisible = ref(false)
const addIds = ref(null)
const handleAdd = () => {
  addVisible.value = true
}
const detailsVisible = ref(false)
const detailsIds = ref(null)
const handleDetails = (val) => {
  detailsVisible.value = true
  detailsIds.value = val
}
const handleTimeChange = (val) => {
  if (val === null) return
  let timeDay = getWeekRange(val)
  times.value = timeDay[0]
  let { time, sevenDays } = getSevenDays(timeDay[0])
  timeList.value = sevenDays
  setTimeout(() => {
    actvieTime.value = time[0]
    getList(actvieTime.value)
  }, 0)
}
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  background: var(--base-home-time-color);
  box-shadow: none;
}
.time_active {
  background: var(--base-home-time-atv) !important;
  color: #3487ff !important;
}
.tag {
  &::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #3487ff;
    border-radius: 50%;
    margin-right: 4px;
    line-height: 8px;
  }
}
// 灰色
.gray::before {
  background: #989898;
}
//红色
.yellow::before {
  background: #f2a911;
}
//黄色
.red::before {
  background: #e4040d;
}
.content_main {
  height: calc(100% - 125px);
  margin-top: 4px;
}
</style>
